<template>
  <view class="installation-data-container">
    <status-bar bgColor="#0088ff"></status-bar>
    
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="goBack">
        <image src="/static/images/icon/backward_flat.png" class="back-icon-img"></image>
      </view>
      <view class="nav-title">安装记录</view>
    </view>
    
    <!-- 安装数据列表 -->
    <view class="data-list">
      <view class="data-item" v-for="(item, index) in installationData" :key="index" @click="viewItemDetail(item)">
        <!-- 房间图标和信息 -->
        <view class="room-info">
          <view class="room-icon-container">
            <image :src="item.roomIcon" class="room-icon"></image>
            <text class="room-label">{{item.roomLabel}}</text>
          </view>
          
          <view class="room-details">
            <view class="room-name">{{item.roomNo}}</view>
			<view class="product-info">
			  <text class="product-name">{{getWindowTypeName(item.windowType)}}</text>
			</view>
            <view class="product-info">
              <text class="product-name">{{getProductTypeName(item.productType)}}</text>
            </view>
            <view class="size-info">
              <text class="size-text">宽度：{{item.windowWidth}}</text>
            </view>
            <view class="size-info">
              <text class="size-text">高度：{{item.windowHeight}}</text>
            </view>
          </view>
        </view>
        
        <!-- 费用信息 -->
        <view class="cost-info">
          <text class="cost-label">费用：</text>
          <text class="cost-value">¥ {{item.masterOrderDataFee}}</text>
          <image src="/static/images/icon/arrow_right_gray.png" class="arrow-icon"></image>
        </view>
      </view>
    </view>
    
    <!-- 底部操作按钮 -->
    <view class="bottom-actions" v-if="false">
      <button class="action-btn add-btn" @click="addInstallationData">
        <text>添加安装数据</text>
      </button>
    </view>
  </view>
</template>

<script>
import { getOrderDataList } from '@/api/app/master/order'
import { confgiList } from '@/api/app/master/common'

export default {
  data() {
    return {
      orderId: null,
      installationData: [],
      windowType: [],
      productType: []
    }
  },
  
  onLoad(options) {
    if (options.orderId) {
      this.orderId = options.orderId;
      // 获取窗户类型
      this.getWindowTypeData();
       // 获取产品类型  
      this.getProductTypeData();

      // 获取安装数据
      this.getInstallationData();
    }
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

  
    getWindowTypeData() {
      confgiList({
        parentSign:'windowType'
      })
        .then(res => {
          if (res && res.code === 200) {
            this.windowType = Array.isArray(res.data) ? res.data : [];
          } else {
            this.windowType = [];
          }
        })
        .catch(() => {
          this.windowType = [];
        });
    },
	
	getWindowTypeName(val){
	    for(let i=0;i<this.windowType.length;i++){
	        if(this.windowType[i].paramValue==val){ 
	            return this.windowType[i].paramName;
	        }
	    }
	    return '';
	},
    

    getProductTypeData() {
      confgiList({
        parentSign:'productType'
      })
        .then(res => {
          if (res && res.code === 200) {
            this.productType = Array.isArray(res.data) ? res.data : [];
          } else {
            this.productType = [];
          }
        })
        .catch(() => {
          this.productType = [];
        });
    },

    getProductTypeName(val){
        for(let i=0;i<this.productType.length;i++){
            if(this.productType[i].paramValue==val){ 
                return this.productType[i].paramName;
            }
        }
        return '';
    },
    
    // 获取安装数据
    getInstallationData() {
      if (!this.orderId) {
        uni.showToast({
          title: '订单ID不存在',
          icon: 'none'
        });
        return;
      }
      
      uni.showLoading({
        title: '加载中...'
      });
      
      getOrderDataList(this.orderId)
        .then(res => {
          if (res.code === 200) {
            // 处理接口返回的数据
            this.processInstallationData(res.data.orderDataList);
          } else {
            uni.showToast({
              title: res.msg || '获取数据失败',
              icon: 'none'
            });
          }
        })
        .catch(err => {
          console.error('获取安装数据失败:', err);
          uni.showToast({
            title: '获取数据失败',
            icon: 'none'
          });
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    
    // 处理安装数据
    processInstallationData(data) {
      if (!data || !Array.isArray(data)) {
        this.installationData = [];
        return;
      }
      
      // 将接口数据转换为页面需要的格式
      this.installationData = data.map((item, index) => {
        return {
          id: item.id ,
          roomNo: item.roomNo || '',
          productType: item.productType || '',
          installFee: item.installFee || '',
          windowWidth: item.windowWidth || '',
          windowHeight: item.windowHeight || '',
          masterOrderDataFee: item.masterOrderDataFee || '',

          windowType: item.windowType || '',
          roomLabel: this.getRoomLabel(item.roomName),
          roomIcon: this.getRoomIcon(item.roomName),
          productName: item.productName || '未知产品',
          width: item.width ? `${item.width}CM` : '0CM',
          height: item.height ? `${item.height}CM` : '0CM',
          cost: item.cost || '0',
          additionalFeeList: item.additionalFeeList || [],
        };
      });
    },
    
    // 获取房间标签
    getRoomLabel(roomName) {
      const labelMap = {
        '客厅': '客厅窗',
        '主卧': '飘窗',
        '次卧': '一字窗',
        '厨房': '厨房窗',
        '卫生间': '卫生间窗',
        '书房': '书房窗',
        '阳台': '阳台窗'
      };
      return labelMap[roomName] || '窗户';
    },
    
    // 获取房间图标
    getRoomIcon(roomName) {
      const iconMap = {
        '客厅': '/static/images/icon/living_room.png',
        '主卧': '/static/images/icon/bedroom.png',
        '次卧': '/static/images/icon/bedroom2.png',
        '厨房': '/static/images/icon/kitchen.png',
        '卫生间': '/static/images/icon/bathroom.png',
        '书房': '/static/images/icon/study.png',
        '阳台': '/static/images/icon/balcony.png'
      };
      return iconMap[roomName] || '/static/images/icon/room_default.png';
    },
    
    // 查看详情
    viewItemDetail(item) {
      uni.navigateTo({
        url: `/pages/order/add-installation-data?id=${item.id}&orderId=${this.orderId}&masterOrderDataFee=${item.masterOrderDataFee}&additionalFeeList=${encodeURIComponent(JSON.stringify(item.additionalFeeList))}`
      });
    },
    
    // 添加安装数据
    addInstallationData() {
      uni.navigateTo({
        url: `/pages/order/add-installation-data?orderId=${this.orderId}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.installation-data-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #0088ff;
  color: #fff;
  padding: 0 30rpx;
  position: relative;
}

.back-btn {
  position: absolute;
  left: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon-img {
  width: 40rpx;
  height: 40rpx;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
}

/* 数据列表 */
.data-list {
  padding: 20rpx;
}

.data-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 房间信息 */
.room-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.room-icon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 30rpx;
  min-width: 120rpx;
}

.room-icon {
  width: 80rpx;
  height: 80rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  background-color: #f8f8f8;
  margin-bottom: 10rpx;
}

.room-label {
  font-size: 24rpx;
  color: #999;
  text-align: center;
}

.room-details {
  flex: 1;
}

.room-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.product-info {
  margin-bottom: 6rpx;
}

.product-name {
  font-size: 28rpx;
  color: #666;
}

.size-info {
  margin-bottom: 4rpx;
}

.size-text {
  font-size: 26rpx;
  color: #888;
}

/* 费用信息 */
.cost-info {
  display: flex;
  align-items: center;
  min-width: 160rpx;
  justify-content: flex-end;
}

.cost-label {
  font-size: 28rpx;
  color: #666;
  margin-right: 8rpx;
}

.cost-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff3b30;
  margin-right: 15rpx;
}

.arrow-icon {
  width: 24rpx;
  height: 24rpx;
  opacity: 0.4;
}

/* 底部操作按钮 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.action-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 30rpx;
  border: none;
}

.add-btn {
  background-color: #0088ff;
  color: #fff;
}

.add-btn:active {
  background-color: #0066cc;
}
</style>